<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <!-- 
    v-for指令：
        1.用于展示列表数据
        2.语法：v-for="(item， index) in xxx" :key="yyy"
        3.可遍历：数组、对象、字符串(用的很少)、、指定次数(用的很少)
   -->
  <div id="root">
    <h2>人员列表</h2>
    <ul>
      <!-- 遍历数组 -->
      <li v-for="(p,index) in persons" :key="index">
        {{p.id}} - {{p.name}} - {{p.age}}
      </li>
    </ul>

    <!-- 遍历对象 -->
    <h2>汽车信息</h2>
    <ul>
      <li v-for="(value, k) of car">
        {{k}} : {{value}}
      </li>
    </ul>

    <!-- 遍历字符串 -->
    <h2>测试遍历字符串</h2>
    <ul>
      <li v-for="(a,b) of str">
        {{a}} - {{b}}
      </li>
    </ul>

    <!-- 遍历指定次数 -->
    <ul>
      <li v-for="(a,b) of 5">
        {{a}} - {{b}}
      </li>
    </ul>
  </div>
  <script>
    Vue.config.productionTip = false
    new Vue({
      el: '#root',
      data: {
        persons: [
          { id: '001', name: 'zd', age: 18 },
          { id: '002', name: 'ls', age: 19 },
          { id: '003', name: 'ww', age: 20 },
        ],
        car: {
          name: 'BMW',
          price: '70W',
          color: 'black'
        },
        str: 'yuyudeqiu'
      }
    })
  </script>
</body>

</html>